<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <div class="conten-warp">
        <div class="header">
            <div class="bg_header">
                <div class="header_nav fl t_title">
                    大气环境监控中心
                    <div class="time" id="time"></div>
                </div>
                <button class="btn btn-primary btn-back" onclick="javascript:history.go(-1)">返回 </button>
            </div>
        </div>
        <div class="data_content">
            <div class="data_main">
                <div class="main_left fl">
                    <div class="left_1">
                        <div class="t_line_box">
                            <i class="t_l_line"></i>
                            <i class="l_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="t_r_line"></i>
                            <i class="r_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="l_b_line"></i>
                            <i class="b_l_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="r_b_line"></i>
                            <i class="b_r_line"></i>
                        </div>
                        <div class="main_title">
                            <img src="images/t_1.png" alt="">&nbsp;空气质量指数
                        </div>
                        <div class="main_des">
                            <div class="title">更新时间：
                                <span id="update"></span>
                            </div>
                            <div id="weather"></div>
                            <div class="main_exponent ">
                                <div class="num-warp">
                                    <div class="num" id="exponent"></div>
                                    <div class="num-desc">
                                        <span>空气质量:</span>
                                        <span id="quality"></span>
                                        <br>
                                        <span>污染级别：</span>
                                        <span id="level"></span>
                                        <br>
                                        <span>首要污染物:</span>
                                        <span id="fcontaminants"></span>
                                    </div>
                                </div>
                                <div class="icon-warp">
                                    <img id="icon" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="exponent">
                            <ul>
                                <li>
                                    <span>优</span>
                                    <span class="lagend lagend1"></span>
                                    <span class="left">0</span>
                                </li>
                                <li>
                                    <span>良</span>
                                    <span class="lagend lagend2"></span>
                                    <span class="left">50</span>
                                </li>
                                <li>
                                    <span>轻度</span>
                                    <span class="lagend lagend3"></span>
                                    <span class="left">100</span>
                                </li>
                                <li>
                                    <span>中度</span>
                                    <span class="lagend lagend4"></span>
                                    <span class="left">150</span>
                                </li>
                                <li>
                                    <span>重度</span>
                                    <span class="lagend lagend5"></span>
                                    <span class="left">200</span>
                                </li>
                                <li>
                                    <span>严重</span>
                                    <span class="lagend lagend6"></span>
                                    <span class="left">300</span>
                                    <span class="right">500</span>
                                </li>
                            </ul>
                        </div>
                        <div class="text-content">
                            <span>对健康的影响：</span>
                            <span id="fyx"></span>
                            <br>
                            <span> 建议措施：</span>
                            <span id="fcs"></span>
                        </div>
                    </div>
                    <div class="left_2">
                        <div class="t_line_box">
                            <i class="t_l_line"></i>
                            <i class="l_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="t_r_line"></i>
                            <i class="r_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="l_b_line"></i>
                            <i class="b_l_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="r_b_line"></i>
                            <i class="b_r_line"></i>
                        </div>
                        <div class="main_title">
                            <img src="images/t_4.png" alt="">&nbsp;24小时AQI
                        </div>
                        <div id="chartAqi24" class="echart" style="width:100%;height: 390px;"></div>
                    </div>
                </div>
                <!-- 地图-->
                <div class="main_center fl">
                    <div class="center_text">
                        <div class="t_line_box">
                            <i class="t_l_line"></i>
                            <i class="l_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="t_r_line"></i>
                            <i class="r_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="l_b_line"></i>
                            <i class="b_l_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="r_b_line"></i>
                            <i class="b_r_line"></i>
                        </div>
                        <div class="main_title">
                            <img src="images/t_3.png" alt="">&nbsp;<span id="fsiteName"></span>数据总览
                        </div>
                        <div class="imga-map">
                            <img class="map-img" src="images/1.png" />
                            <span class="glyphicon glyphicon-map-marker map-tag" style="left: 100px;top: 100px;"></span>
                            <span class="glyphicon glyphicon-map-marker map-tag" style="left: 830px;top:430px;"></span>
                            <span class="glyphicon glyphicon-map-marker map-tag" style="left: 705px; top: 570px;"></span>
                            <span class="glyphicon glyphicon-map-marker map-tag" style="left: 670px;top: 163px;"></span>
                            <span class="glyphicon glyphicon-map-marker map-tag" style="left: 218px; top: 278px;"></span>
                        </div>
                    </div>
                </div>
                <!-- 右侧-->
                <div class="main_right fr">
                    <div class="right_1">
                        <div class="t_line_box">
                            <i class="t_l_line"></i>
                            <i class="l_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="t_r_line"></i>
                            <i class="r_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="l_b_line"></i>
                            <i class="b_l_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="r_b_line"></i>
                            <i class="b_r_line"></i>
                        </div>
                        <div class="main_title">
                            <img src="images/t_4.png" alt="">&nbsp;室外
                        </div>
                        <div id="chart_3" class="echart" style="width:100%;height: 240px;"></div>
                    </div>
                    <div class="right_1" style="margin-bottom: 40px;">
                        <div class="t_line_box">
                            <i class="t_l_line"></i>
                            <i class="l_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="t_r_line"></i>
                            <i class="r_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="l_b_line"></i>
                            <i class="b_l_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="r_b_line"></i>
                            <i class="b_r_line"></i>
                        </div>
                        <div class="main_title">
                            <img src="images/t_4.png" alt="">&nbsp;室内
                        </div>
                        <div id="chart_4" class="echart" style="width:100%;height: 240px;"></div>
                    </div>
                    <div class="right_2">
                        <div class="t_line_box">
                            <i class="t_l_line"></i>
                            <i class="l_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="t_r_line"></i>
                            <i class="r_t_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="l_b_line"></i>
                            <i class="b_l_line"></i>
                        </div>
                        <div class="t_line_box">
                            <i class="r_b_line"></i>
                            <i class="b_r_line"></i>
                        </div>

                        <div class="main_title">
                            <img src="images/t_2.png" alt="">&nbsp;联网率
                        </div>
                        <div id="chartDevice" class="chart" style="width:100%;height:200px;"></div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ticker-wrapper">
        <div class="ticker-content"></div>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">设备信息</h4>
                </div>

                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                            <th>设备编号</th>
                            <th>设备名称</th>
                            <th>状态</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>001</td>
                                <td>设备1</td>
                                <td>
                                    <span class="label label-success">在线</span>
                                </td>
                                <td>

                                </td>
                            </tr>

                            <tr>
                                <td>005</td>
                                <td>设备7</td>
                                <td>
                                    <span class="label label-warning">离线</span>
                                </td>
                                <td>
                                    <button class="btn btn-primary">发送通知 </button>
                                </td>
                            </tr>
                            <tr>
                                <td>002</td>
                                <td>设备3</td>
                                <td>
                                    <span class="label label-success">在线</span>
                                </td>
                                <td>

                                </td>
                            </tr>
                            <tr>
                                <td>003</td>
                                <td>设备4</td>
                                <td>
                                    <span class="label label-warning">离线</span>
                                </td>
                                <td>
                                    <button class="btn btn-primary">发送通知 </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/config.js"></script>
<script src="js/api.js"></script>
<script src="js/base.min.js"></script>
<script src="js/site.js"></script>
<script src="js/jquery.ex.min.js"></script>
<script>
    $(function () {
        $(".ticker-wrapper").roll({ speed: 2, data: ['设备1网络异常,请检测设置网络', '设备2网络异常，请检测设置网络'] });
    });
</script>

</html>